<template>
	<view class="s-back">
		
		<view class="s-back" :style="{
			paddingTop:statusbarHeight+'px'
		}">
			<view class="s-back" style="position: absolute;">
				<view class="s-back"> 	
					<view class="index-line1" style="color:#fff">
			<view style="width: 80px;">
				<uni-icons type="back" size="25" @click="goBack" color="#fff"></uni-icons>
			
		
				
			</view>
			<view class="index2">{{ pageTitle }}</view>
			<view class="index3">
				<view style="width: 90px;height: 10px;"></view>
		</view>
			
						
					</view>
					<scroll-view scroll-y="true" scroll-x="true" 
          :style="{
            background: '#1A2134',
           paddingBottom:'20px',
            width:screenWidth + 'px',
            height:screenHeight - 75 - statusbarHeight +'px',
			position:'relative'
			
          }" class="scrollView" 
		  :scroll-top="scrollTopHeight"
		  @scrolltolower="goBottom"

					show-scrollbar="true" :scroll-into-view="getScrollView" scroll-with-animation="true">
					
					<view id="scroll-view-content">
				<PaintIndex v-if="activeIndex==1" ref="paintIndex" @changeTabbar="jumpTabbar($event,val)"></PaintIndex>
				<Square v-if="activeIndex==2" ref="square"></Square>
				<My v-if="activeIndex==3" ref="my"></My>


				</view>

			<div v-if="activeIndex==1" style="width:100%;height:110px;"></div>
			<div v-else style="width:100%;height:50px;"></div>
			
					
		</scroll-view>
			</view >	
				<view style="background-color: rgb(21, 21, 32);" :style="'position: absolute;bottom:'+(0).toString()+'px;left:0;right:0;width:auto;display:block;padding-bottom:0px'"
				class="bottomClass1">

				<view class="bottom" v-if="activeIndex==1">
			<view class="btn" @tap="send">立即生成(消耗{{ cost }}{{ unit }})</view>
		</view>




				
					<view class="bottom-bar">
						<view @tap="jumpTabbar(item.id)" class="item" v-for="(item,index) in tabbars">
							<image v-if="activeIndex==item.id" :src="item.apic" style="width:50rpx;height:50rpx;"></image>
							<image v-else :src="item.pic" style="width:50rpx;height:50rpx;"></image>
							<view class="text" :style="{color:activeIndex==item.id?'#7CD887':''}">{{ item.text }}</view>
						</view>
					</view>

					
				</view>
			</view>
		</view>	
		
		
	</view>
</template>

<script>
let s
import config from '@/config'
import {handleSymbol,handleSymbolVoice} from '@/utils'
import {buf2hex,hexToStr,decodeUtf8,arrayBufferToString} from '@/utils/sse'
import {EventSourcePolyfill} from 'event-source-polyfill';
import PaintIndex from '@/pages/plugin/paint/comp/index/index'
import Square from '@/pages/plugin/paint/comp/square/square'
import My from '@/pages/plugin/paint/comp/my/my'


	// import permision from "@/common/permission.js"
	import popup from '@/components/popup/popup.vue';
	import chatItem from '@/components/chat-item/chat-item.vue';
	import uniIcons from '@/uni_modules/uni-icons/components/uni-icons/uni-icons.vue';
	import socketItem from '@/components/socket-item/socket-item.vue'
	// var util=require('@/common/util.js')
	var recordManager=null;
	var recordTimeInterval=null;
	export default {
		name:"easyChat",
    components:{
		chatItem,
		PaintIndex,
		Square,
		My
	},
		data() {
			return {
                isShowHightPaint:false,
				tabbars:[
				{
					id:4,
					pic:'/static/tabbar/1.png',
					apic:'/static/tabbar/1_a.png',
					text:'首页'
				},
				// 	{
				// 	id:1,
				// 	pic:'/static/img/paint/pic.png',
				// 	apic:'/static/img/paint/pic_a.png',
				// 	text:'首页'
				// },
				{
					id:2,
					pic:'/static/img/paint/square.png',
					apic:'/static/img/paint/square_a.png',
					text:'广场'
				},
				{
					id:3,
					pic:'/static/img/paint/my.png',
					apic:'/static/img/paint/my_a.png',
					text:'作品'
				},
				
			],
				websocket:null,
				deleIdx:0,
				isShowDele:false,
				pageTitle:'',

				scrollTopHeight:0,
				textTemp:'',
				isLoading:false,
				activeIndex:1,


        		socketUrl:'',
				timeStr:'', 
				clickMic:false, 
				scrollview:'',
				inputcontent:'',
				screenHeight:0,
				bottomHeight:10,
				micHeight:255,
				formatedRecordTime:"00:00:00",
				recordTime:0,
				isShowTips:false,
				isRecording:false,
				isCancel:false,
				socketTask:null,
				

				form:{},
			


				chatList:[],
        screenHeight:0,
        screenWidth:0,
        statusbarHeight:0,
		_audioContext:null,


		options:{},
		isVoice:false,
		source:null,
		cost:'',
		unit:'',
			}
		},
		async onLoad(opts) {
			await this.$onLaunched
			this.getCost()
			this.unit = uni.getStorageSync('unit')
			this.isVoice = uni.getStorageSync('isVoice')
            
			
			s = this
			s.options = opts
			
			this.screenWidth = uni.getStorageSync('screenWidth')
      this.statusbarHeight = uni.getStorageSync('statusBarHeight')
			this.screenHeight = uni.getStorageSync('screenHeight')
			// s.pageTitle = uni.getStorageSync('pageTitle')||'聊天'
			s.pageTitle = '绘画首页'
			uni.setNavigationBarTitle({
							title:s.pageTitle
							})
	
			if(opts.index==3){
				this.activeIndex = 3
				s.pageTitle = '我的作品'
			}
		},
		mounted() {
			uni.getSystemInfo({
				success: (res) => {
					this.$nextTick(()=>{
						this.screenHeight=res.windowHeight
					})
				}
			})
			
		
		},
		
		computed:{
			
		
			getScrollView(){
				return this.scrollview
			},
		
		},
		methods: {
			goBottom(){
				if(this.activeIndex==3){
					console.log('bottom')
					this.$refs['my'].goBottom()
				}else if(this.activeIndex==2){
					console.log('bottom')
					this.$refs['square'].goBottom()
				}
				
			},
			async getCost(){
        const r = await this.$u.api.hpaintCost()
        if(r){
            this.cost = r.data
        }
    },
			send(){
				this.$refs['paintIndex'].send()
			},
			jumpTabbar(type){
				let oldIdx = this.activeIndex
				this.activeIndex = type
				if(type==1){
					s.pageTitle = '绘画首页'
				}else if(type==2){
					s.pageTitle = '广场'
				}else if(type==3){
					s.pageTitle = '我的作品'
				}else if(type){
					if(oldIdx==1){
						uni.switchTab({
							url:'/pages/index/index?isMiniprogram='+uni.getStorageSync('isMiniprogram')
						})
					}else{
						this.activeIndex = 1
						s.pageTitle = '绘画首页'
					}
					
				}
				
						
			},
			
			goBack(){
				uni.navigateBack({
					 delta: 1
				});
			},
		
			scrollToBottom(){
				uni.createSelectorQuery().in(s).select('#scroll-view-content').boundingClientRect((res)=>{
							let top = res.height-(s.screenHeight - s.bottomHeight - 200);
							if(top>0){
								this.scrollTopHeight=top;
							}
						}).exec()
			},
			
			
			
			
		},
		beforeDestroy(){
			

			
		}
	}
</script>

<style lang="scss">
.example1 {
  &.out {
	width: 100%;
    padding: 2px;
    border-radius: 40rpx;
    background: linear-gradient(to right, #B46A80, #739B83,);
  }
  .in {
    width: calc(100vw - 70px);
	// #ifdef H5
	width: calc(100% - 20px);
	// #endif
    height: 100%;
    background: rgb(21, 21, 32);
    border-radius: 40rpx;
  }
}
.inputClass{

			background-color: transparent;
			align-content: center;
			padding: 5px 10px 5px 10px;
			font-size: 30rpx;
			width: 100%;
      // border: 1px solid;
      // border-image: linear-gradient(to right, red, #578aef) 1;
      // border-radius: 15px;
    }	
		
	.scrollView{
			position: fixed;
			right: 0px;
			left: 0;
			top: 0;
			/* padding-left: 10px;
			padding-right: 10px;
			padding-top: 10px; */
			width: auto;
		}	
		
	.bottomClass1{
		padding: 10px 12px;
    background: rgb(21, 21, 32);
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    display: flex;
    // height: 86px;
    justify-content: flex-start;
    align-items: center;
    flex-direction: row;
		
		}
    .uni-row{
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      align-items: center;
    }
    .uni-flex{
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      align-items: center;
    }
    .s-back{
      background: #1A2134;
    }
	.index-inp{
		width: 100%;
	}
	.index-inp-inner{
		width: calc(100% - 14px);
		height: 36px;
		color: #fff;
		padding: 0 10px;
	}
	.index-ml10{
		margin-right: 10px;
	}
	.index-flex-right{
		display: flex;
		justify-content: flex-end;
	}
	.index-flex-left{
		display: flex;
		justify-content: flex-start;
	}
	.index-no{
		margin-left: 12px;
		margin-top: 12px;
		background: #AA4B4F;
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 0 26rpx;
		color: #fff;
		height: 60rpx;
		border-radius: 40rpx;
	}
	.index-mt12{
		margin-top: 16px;
		margin-right: 12px;
	}
	.index-line1{
		padding: 12px;
		display: flex;
		align-items: center;
	}
	.index1{
		padding: 0px;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 20px;
		background: #E6D08D;
		color: #5F3D22;
		
	}
	.index1-text{
		margin-left: 2px;
		margin-right: 10px;
		font-size: 16px;
	}
	.index2{
		font-size: 36rpx;
		flex:1;
		display: flex;
		justify-content: center;
	}
	.index3-mr4{
		margin-right: 16rpx;
	}
	.index-line3{
		display: flex;
		align-items: center;
		margin: 24rpx;
		color: #fff;
		font-size: 32rpx;
	}
	.index-line2{
		margin:30rpx 24rpx;
		background: #323249;
		border-radius: 10px;
		padding:28rpx;
		color: #A3A3B7;
		font-size: 32rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.index-line-mb12{
		margin-bottom: 60rpx;
	}
	.edit-chat{
		background:rgba(#151520, 0.9);
		padding: 20px;
		.title{
			color:#fff;
			font-size: 18px;
			margin-bottom: 20px;
		}
		.title2{
			color:#999;
			font-size: 14px;
		}
		.bottom{
			margin-top: 20px;
			display: flex;
			justify-content: space-between;
			width: 300px;
		.btn8{
				width: 130px;
				height: 36px;
				// background: #EDC596;
				color:#fff;
				border-radius: 80rpx;
				border:1px solid #7CD887;
				display: flex;
				justify-content: center;
				align-items: center;
			
				margin-right: 30rpx;
			}
			.btn9{
				color:#fff;
				width: 130px;
				height: 36px;
				// background-image: linear-gradient(to bottom, #E7B266,#ff8432);
				background-image: linear-gradient(to top, #7CD887,#75CCD1);
		
				border-radius: 80rpx;
				// border:1px solid #fff;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}
	}
	.bottom-bar{
		margin-top: 0px;
		padding-bottom: 4px;
		display: flex;
		
		justify-content: center;
		
		.item{
			flex: 1;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
		}
		.text{
			margin-top: 4rpx;
			color:#686A7A;
			font-size:24rpx;
		}
	}
	.bottom{
		
		bottom: 65px;
		position: absolute;
		width: calc(100% - 28px);
        // padding: 14px;
		
		
		.btn{
			padding: 10px;
			background-image: linear-gradient(to top, #7CD887,#75CCD1);
			border-radius: 30px;
			color:#fff;
			font-size: 28rpx;
			font-weight: 500;
			text-align: center;
			
		}
		
	}
</style>
